import React from "react";
import PropTypes from 'prop-types';
import bindthis from 'autobind-decorator'
import {injectReducer} from "../../store/reducers";
import './LoginView.scss'
import Dialog from "@material-ui/core/es/Dialog/Dialog";
import TextField from "@material-ui/core/es/TextField/TextField";
import DialogContent from "@material-ui/core/es/DialogContent/DialogContent";
import AppBar from "@material-ui/core/es/AppBar/AppBar";
import Toolbar from "@material-ui/core/es/Toolbar/Toolbar";
import Button from "@material-ui/core/es/Button/Button";
import DialogActions from "@material-ui/core/es/DialogActions/DialogActions";
import Paper from "@material-ui/core/es/Paper/Paper";
import Lock from "@material-ui/icons/Lock";

@bindthis
export default class LoginView extends React.Component {

	static ACTION_NAME = "LOGIN";
	static contextTypes = {store: PropTypes.object.isRequired}

	state = {
		show: true,
		resolve: null,
		reject: null,
		isLogin: false,
		login_username: "", login_password: "",
		reg_token: "", reg_username: "", reg_password: "", reg_nick: "", reg_email: ""
	}

	constructor(props, context) {
		super(props, context)

		const {store} = context;

		const reducer = (state = "", action) => {
			if (action.type !== this.ACTION_NAME)
				return state;
			//
			this.setState({show: true, text: action.text.text, title: action.text.title, resolve: action.resolve, reject: action.reject})
			//
			// return action.text.text
			return "";
		}

		injectReducer(store, {key: this.ACTION_NAME, reducer})
	}

	handleClose() {
		this.state.reject("confirm canceled.")
		this.setState({open: false})
	}

	handleOK() {
		this.state.resolve()
		this.setState({open: false})
	}

	handleChange = name => event => {
		this.setState({[name]: event.target.value});
	}

	toLogin() {

	}

	toReg() {

	}


	render() {
		if (!this.state.show)
			return null

		const loginForm =
			<div className="form-container">
				<div><TextField className="d-form-input" label="用户名" value={this.state.login_username} onChange={this.handleChange('login_username')} margin="normal"/></div>
				<div><TextField className="d-form-input" label="密码" value={this.state.login_password} onChange={this.handleChange('login_password')} margin="normal"/></div>
			</div>

		const regForm =
				<div className="form-container">
					<Paper elevation={1} className="d-reg-tips">
						<Lock/>
						<span>*DNote并不对外开放，注册时需要口令，<a href="https://weibo.com/2689640062/profile" target="_blank">联系我</a></span>
					</Paper>
					<div><TextField className="d-form-input" label="口令*" value={this.state.reg_token} onChange={this.handleChange('reg_token')} margin="normal"/></div>
					<div><TextField className="d-form-input" label="登录用户名" value={this.state.reg_username} onChange={this.handleChange('reg_username')} margin="normal"/></div>
					<div><TextField className="d-form-input" label="昵称" value={this.state.reg_nick} onChange={this.handleChange('reg_nick')} margin="normal"/></div>
					<div><TextField className="d-form-input" label="密码" value={this.state.reg_password} onChange={this.handleChange('reg_password')} margin="normal"/></div>
					<div><TextField className="d-form-input" label="邮箱" placeholder="邮箱不会验证，但是是重置密码的唯一条件" value={this.state.reg_email} onChange={this.handleChange('reg_email')} margin="normal"/></div>
				</div>

		const isLogin = this.state.isLogin

		return (
			<Dialog aria-labelledby="dialog-title" open={true} classes={{paper: "d-dialog-header"}}>
				<AppBar position="static" style={{backgroundColor: "#5e5e5e"}}>
					<Toolbar>
						<div className="d-login-header">
							<div className="d-login-title"><span className="spac">D</span><span>-NOTE</span></div>
							<div className="d-login-slogan">WRITE TO THE PAST</div>
						</div>
					</Toolbar>
				</AppBar>

				<form className="d-form">
					<DialogContent>{isLogin ? loginForm : regForm}</DialogContent>
					<DialogActions>
							<Button onClick={() => this.setState({isLogin: !isLogin})}>{isLogin ? "注册" : "返回登录"}</Button>
							<Button color="primary" onClick={() => isLogin ? this.toLogin() : this.toReg()}>{isLogin ? "登录" : "注册"}</Button>
					</DialogActions>
				</form>
			</Dialog>
		)
	}
}

